import { useParams } from 'umi';
import banner from '@/config/img/banner3.png';
import Title from '../component/Title';
import { useEffect, useState } from 'react';
import { dataOBJ } from './index.config';
import './index.less';
const literatureStory = (props: any) => {
  const [newObj, setNewObj] = useState<any>({});
  const [seeMore, setSeeMore] = useState(false);
  const params: any = props.location.query.id;
  useEffect(() => {
    if (params) setNewObj(dataOBJ?.[params]);
  }, [params]);

  return (
    <div className="liter-story">
      <div className="banner">
        <img src={banner} alt="" />
      </div>
      <div className="liter-content">
        <Title
          title={'雷剧小故事'}
          enTitle={'LeiJu short story'}
          className={'liter'}
        ></Title>
        <div className="story-top">
          <img src={newObj?.img} alt="" />
          <div className="story-title">{newObj?.title}</div>
          <div className="story-desc">{newObj?.desc}</div>
        </div>
        <div className="story-bottom">
          <div className={`story-content ${seeMore ? 'see' : ''}`}>
            {!seeMore ? newObj?.story?.slice(0, 1000) + `...` : newObj?.story}
          </div>
          {!seeMore && (
            <div className="button" onClick={() => setSeeMore(true)}>
              点击查看更多
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default literatureStory;
